import './App.css';
import Page1 from "./rrouterComponents/Page1"
//双向绑定组件
import {useState,useEffect,useMemo,useCallback,useRef,createContext} from "react"
export let Mycontext = createContext()

function App(){
  let [msg,setmsg] = useState(()=>{
    return "测试双向绑定"
  })

  let [arr,setarr] = useState(()=>{
    return [0,1,2]
  })

  let providerObject = useState(()=>{
    return {
      title:"zs",
      age:12
    }
  })
  
  let changmsg = useCallback((e)=>{
    let msg = e.target.value
    setmsg(msg)
  },[])

  let dom1 = useRef()

  const addArr = ()=>{
    let value = arr.length
    let _arr = [...arr]
    _arr.push(value)
    setarr(_arr)
  }

  useMemo(()=>{
    let sum = arr.reduce((pre,next)=>{
      return pre+next
    })
    setmsg(sum)
  },[arr])
  useEffect(()=>{
    // console.log("不加第二个参数 相当于  didmounted   和  diduodated 第二个参数为空数组相当于didupdated   第二个参数为[msg] 相当于watched属性")
  },[msg,arr])
  useEffect(()=>{
    console.log(dom1)
  },[])
  return <>
    <div className='App'>
      <h1>函数组件的各种hook</h1>
      useState输入框:<input placeholder='测试usestate' onChange={changmsg}></input>
      <div> 测试useState数据：{msg}</div>
      <button ref={dom1} onClick={addArr}>测试useMemo 相当于计算属性</button>
      <Mycontext.Provider value={providerObject}>
        <Page1></Page1>
      </Mycontext.Provider>
    </div>
    
  </>
}


export default App;
